Chart Axis Display Options

The Chart control has XAxis and YAxis properties which you can use to customize the appearance and behavior of the chart axes. To customize an axis, set the appropriate property to a suitable ChartAxis object.

CopyAdding a title to the X axis
<ms:Chart Title="Sales">
  <ms:Chart.XAxis>
    <ms:ChartAxis Title="Quarter" />
  </ms:Chart.XAxis>
</ms:Chart>

Adding a Title to an Axis

To add a title to a chart axis, set the Title property as shown above.

Specifying the Axis Range

By default, the Chart control calculates the minimum and maximum of each axis based on the the values of the supplied data plus a nominal ‘zero’ data point. To override the default range, set the Minimum and Maximum properties:

CopySetting a fixed range for an axis
<ms:Chart Title="Results" Width="600" Height="400">
  <ms:Chart.YAxis>
    <ms:ChartAxis Title="Profit!" Minimum="100000" Maximum="250000" />
  </ms:Chart.YAxis>
</ms:Chart>

Customizing the Axis Appearance

You can customize the appearance of the axis by setting the ChartAxis.Style property. The target type of the style should be Border.

CopyDrawing the axis in red
<ms:Chart.YAxis>
  <ms:ChartAxis>
    <ms:ChartAxis.AxisLineStyle>
      <Style TargetType="Border">
        <Setter Property="BorderBrush" Value="Red" />
      </Style>
    </ms:ChartAxis.AxisLineStyle>
  </ms:ChartAxis>
</ms:Chart.YAxis>

You can entirely replace the appearance of the axes by setting the Chart.XAxisTemplate and/or Chart.YAxisTemplate properties. The templates are applied to ChartAxis objects.

Controlling Tick Marks and Labels

The Chart control shows tick marks at regular intervals along each axis, labelled with the associated data values. By default, the interval between tick marks on an axis is based on the minimum and maximum values. To override the default tick mark interval, set the MajorTickSpacing property:

CopySetting tick mark spacing on an axis
<ms:Chart.YAxis>
  <ms:ChartAxis MajorTickSpacing="2500" />
</ms:Chart.YAxis>

To show minor tick marks between the major tick marks, set the MinorTickMarkVisibility property.

By default, the zero tick mark and label are placed at the chart origin, and the maximum tick mark and label at the end of the axis. It is sometimes useful to have these appear only in the interior of the axis. For example, in a bar chart, you would not want the first and last bars to overspill the X axis. You can set the TickLayout and LabelLayout properties of the ChartAxis to override the default behavior.

To customise the appearance of tick marks, set the MajorTickMarkStyle and/or MinorTickMarkStyle. The target type of the style should be Border.

Label Presentation and Formatting

To format the label text, use the ChartAxis.LabelFormat property. This is a normal .NET formatting string.

CopyFormatting the label using a format string
<ms:Chart.YAxis>
  <ms:ChartAxis LabelFormat="{}{0:F2}">
</ms:Chart.YAxis>

If your format string starts with an open brace, precede it with an open-close brace ({}) so that Silverlight doesn’t try to interpret it as a markup extension.
 

For finer control over presentation and formatting, you can provide a DataTemplate using the LabelTemplate property. The template data context will be the data value on the axis.

<Path Data=”M 0,0 L 34,0 40,6 34,12 0,12 Z” Fill=”AliceBlue” Stroke=”CadetBlue” /> <TextBlock Text=”{Binding}” FontFamily=”Consolas” TextAlignment=”Right” VerticalAlignment=”Center” Margin=”0,0,8,0” />

Preventing Overlapping Labels on an Axis

If tick marks are very dense, especially along the horizontal axis, then the labels may overlap. To prevent this, you can rotate or stagger the labels.

To stagger the labels, set the LabelLevelCount property to a value greater than 1. The Chart control will stagger the labels across the specified number of levels (for example, a LabelLevelCount of 2 on the X axis will cause the labels to be staggered across two rows).

To rotate the labels, set the LabelRotation property.

Converting Between Values and Axis Positions

A chart axis normally maps data values linearly into the display space. However, sometimes data values are not numeric or the mapping of numeric values should not be linear. An example of non-numeric data being plotted along an axis is DateTime values. An example of non-linear mapping is logarithmic scaling.

Both of these situations are handled by the ChartAxis.ValueConverter property, which is of type IAxisValueConverter. IAxisValueConverter translates between your data values and a linear numeric range. The translated values are not necessarily physical coordinates—they need only represent relative positions along the axis, which the Chart control will then automatically scale to the physical length of the axis.

Silverlight Elements includes converters for DateTime plotting and for logarithmic scales. See DateTimeAxisValueConverter and LogarithmicAxisValueConverter respectively.

You don’t have to implement a converter to use a non-numeric axis. By default, non-numeric data will be arranged at equal intervals in the order in which is appears in the series. You need a converter only if you want to change or customize the positions at which values appear on the axis.
 

For examples, see the CustomAxisScale page in the ChartingSampleExplorer sample.

Displaying Multiple Y Axes

If you are displaying multiple data series, and their ranges are sufficiently different that it’s not practical to plot them on the same scale, you can create additional Y axes and plot each series against a different axis. To do this, add ChartAxis objects with suitable Minimum and Maximum properties to the Chart.AlternateYAxes collection. Each additional ChartAxis must have a unique Title. Then, for each data series that you want to use a nondefault Y axis, set its YAxisTitle to the title of the desired axis.

For examples, see the AlternateAxes page in the ChartingSampleExplorer sample.